<template>
  <div class="about">
    <ul>
      <li v-for="(item,index) in list" :key="index">{{item.name | filName(index) | filnum}} -- {{item.dic}}</li>
    </ul>
  </div>
</template>
<script>
// import bus from '../utils/bus'
let that = null;
export default {
   data(){
    return {
      list:[{name:"刘备",dic:"三顾茅庐"},{name:"诸葛亮",dic:"草船借箭"},{name:"关羽",dic:"刮骨疗毒"},{name:"曹孟德",dic:"搭建铜雀台"}],
      listname:["刘皇叔","卧龙","武圣","曹阿瞒"],
    }
  },
  created() {
    that = this;
  },
  filters:{ // 页面的过滤器
  // 可以穿参数，还可以并联
     filName(val,i){
      //  console.log(i);
      //  console.log(val);
      //  console.log(that.listname);
       return val + "--" + that.listname[i]
     },
    //  filnum(val){
    //   //  console.log(val);
    //  }
  },
   mounted() {
    this.$bus.$on('search',(val) => {
      // console.log(val);
      this.list = this.list.filter(item => item.name.includes(val))
    })
  },
}
</script>
